<template>
	<!-- 不同平台下高度显示有问题 -->
	<!-- #ifdef APP-PLUS-NVUE -->
	<button
		class="ac-button"
		:class="['h-90', props._class]"
		:style="[_style, props._style]"
		@click="_onClick($event)"
		@longpress="_onLongpress($event)"
	></button>
	<!-- #endif -->

	<!-- #ifndef APP-PLUS-NVUE -->
	<button
		class="ac-button"
		:class="[props._class]"
		:style="[_style, props._style]"
		:openType="props.openType"
		@touchmove="emits('touchmove', $event)"
		@getphonenumber="emits('getphonenumber', $event)"
		@error="emits('error', $event)"
		@opensetting="emits('opensetting', $event)"
		@launchapp="emits('launchapp', $event)"
		@contact="emits('contact', $event)"
		@chooseavatar="emits('chooseavatar', $event)"
		@click="_onClick($event)"
		@longpress="_onLongpress($event)"
	>
		<!-- #endif -->
		<ac-icon
			v-if="props.icon"
			:name="props.icon"
			:size="props.iconSize"
			:color="props.plain ? props.color : props.iconColor"
			:_class="props.label ? 'mr-8' : ''"
		></ac-icon>

		<ac-loading
			v-if="props.loading"
			:showText="false"
			:color="props.plain ? props.color : props.fontColor"
			:_class="props.label ? 'mr-8' : ''"
		>
		</ac-loading>

		<!-- {{_style}} -->
		<ac-text
			v-if="props.label"
			:color="props.plain ? props.color : props.fontColor"
			:fontSize="btnSize[props.size]?.fontSize || props.fontSize"
			:label="props.label"
			_class="px-4"
		/>
	</button>
</template>

<script lang="ts" setup>
import { computed, ref, watch, onBeforeMount } from 'vue';
import { pub_props, computedColor, computedMarginPadding } from '@/uni_modules/ac-ui/utils/minxs/props';

const props = defineProps({
	...pub_props,
	label: {
		type: String,
		default: '',
	},
	size: {
		type: String,
		default: 'normal', //large normal small mini
	},
	icon: {
		type: String,
	},
	iconSize: {
		type: String,
		default: '46',
	},
	iconColor: {
		type: String,
		default: 'gray-1',
	},
	fontSize: {
		type: String,
		default: 'md',
	},
	fontColor: {
		type: String,
		default: 'gray-1',
	},
	border: {
		type: [String, Number],
		default: 1,
	},
	color: {
		type: String,
		default: 'blue-500',
	},
	linear: {
		type: Boolean,
		default: false,
	},
	// 渐变色背景下设置缕空无效
	plain: {
		type: Boolean,
		default: false,
	},
	loading: {
		type: Boolean,
		default: false,
	},
	disabled: {
		type: Boolean,
		default: false,
	},
	margin: {
		type: Array,
	},
	//开放能力
	openType: {
		type: String,
		default: '',
	},
	/**
	 * submit,reset 在tm-form中使用。
	 */
	formType: {
		type: String,
		default: '',
	},
	_class: {
		type: String,
	},
	_style: {
		type: String,
	},
});

const btnSize = {
	normal: {
		fontSize: '36',
		height: '80rpx',
	},
	small: {
		fontSize: '30',
		height: '60rpx',
	},
	mini: {
		fontSize: '22',
		height: '55rpx',
	},
};

const _fontColor = computed(() => {
	let fontColor = props.fontColor;
	if (props.plain) {
		fontColor = props.color;
	}
	return computedColor(fontColor, '', props.theme);
});

const _fontSize = computed(() => {
	// let fontColor = props.fontColor;
	// if (props.plain) {
	// 	fontColor = props.color
	// }
	// return computedColor(fontColor, '', props.dark ? true : false)
});

const _style = computed(() => {
	let style = {} as any;
	if (!props.border) {
		// style['border'] = `none`;
	}
	if (props.plain) {
		style['border'] = `solid 1rpx`;
		style['border-color'] = computedColor(props.color, '', props.theme);
		style['background-color'] = 'transparent';
	}
	if (props.margin) {
		style['margin'] = computedMarginPadding(props.margin);
	}
	if (props.size) {
		switch (props.size) {
			case 'normal':
				style['font-size'] = btnSize[props.size].fontSize + 'rpx';
				style['line-height'] = btnSize[props.size].height;
				style.height = btnSize[props.size].height;
				break;
			case 'small':
				style['font-size'] = btnSize[props.size].fontSize + 'rpx';
				style['line-height'] = btnSize[props.size].height;
				style.height = btnSize[props.size].height;
				break;
			case 'mini':
				style['font-size'] = btnSize[props.size].fontSize + 'rpx';
				style['line-height'] = btnSize[props.size].height;
				style.height = btnSize[props.size].height;
				break;
			default:
				break;
		}
	}
	if (props.disabled) {
		style.opacity = 0.7;
	}
	if (!props.plain && props.color && !props.linear) {
		style['background-color'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	}
	if (!props.plain && props.color && props.linear) {
		style['background-image'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	}
	return style;
});

const emits = defineEmits([
	'click',
	'touchstart',
	'touchmove',
	'touchcancel',
	'getphonenumber',
	'getUserInfo',
	'getUserProfile',
	'opensetting',
	'chooseavatar',
]);

/** -----------form专有------------ */
// const formtype = computed(()=>props.formType)
// //父级方法。
// let FormParent:any = null;

// if(formtype.value=='reset'||formtype.value=='submit'){
// 	FormParent = proxy?.$parent
// 	while (FormParent) {
// 		if (FormParent?.tmFormComnameId == 'tmFormId' || !FormParent) {
// 			break;
// 		} else {
// 			FormParent = FormParent?.$parent ?? undefined
// 		}
// 	}
// }
/** -----------end------------ */

function _onClick(e) {
	// if(FormParent!=null && typeof FormParent !='undefined'&&formtype.value&&!props.loading){
	// 	FormParent[formtype.value]();
	// }
	emits('click', e);
	if (props.url !== '' && typeof props.url === 'string') {
		let url = props.url;
		if (url[0] !== '/') url = '/' + url;
		uni.navigateTo({
			url: url,
		});
		return;
	}
	if (props.openType == 'getUserInfo' || props.openType == 'getUserProfile') {
		// #ifdef MP-WEIXIN
		uni.getUserProfile({
			desc: '用于完善会员资料',
			success: function (userProfile) {
				if (userProfile.errMsg != 'getUserProfile:ok') {
					uni.showToast({
						title: userProfile.errMsg,
						icon: 'error',
						mask: true,
					});
					return;
				}
				emits('getUserInfo', userProfile);
				emits('getUserProfile', userProfile);
			},
			fail: (error) => {
				console.log(error);
				uni.showToast({
					icon: 'none',
					title: typeof error == 'object' ? error.errMsg : error,
				});
			},
		});
		// #endif
	}
}

function _onLongpress(event) {
	emits('longpress'.event);
}
</script>

<style scoped>
.ac-button {
	height: 90rpx;
}

.ac-button::after {
	border: none;
	line-height: 0;
}
</style>
